<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">

                <el-form-item label="编码id" prop="personalizeId">
                    <el-input v-model="state.queryParams.personalizeId" placeholder="请输入编码id" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="身高" prop="height">
                    <el-input v-model="state.queryParams.height" placeholder="请输入身高" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="体重" prop="weight">
                    <el-input v-model="state.queryParams.weight" placeholder="请输入体重" clearable style="width: 240px" />
                </el-form-item>
                
                <el-form-item label="期望体型" prop="targetBody">
                    <el-input v-model="state.queryParams.targetBody" placeholder="请输入期望体型" clearable style="width: 240px" />
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--制作表格-->
        <el-card style="margin-top: 20px;">
            <el-row :gutter="10" class="mb20">
                <el-col :span="1.5">
                    <el-button v-hasPermi="['exercise:personalize:add']" type="primary" plain icon="Plus"
                       @click="addOrUpdateHandle"  >新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button v-hasPermi="['exercise:personalize:edit']" type="success" plain icon="Edit" :disabled="state.single"
                       @click="addOrUpdateHandle(state.ids[0])" >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button v-hasPermi="['exercise:personalize:remove']" type="danger" plain icon="Delete"
                        :disabled="state.multiple" @click="deleteBatchHandle">删除</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getDataList"></right-toolbar>
            </el-row>
            <el-table v-loading="state.dataListLoading" :data="state.rows" style="width: 100%"
                @selectionChange="selectionChangeHandle">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="定制id" align="center" prop="personalizeId" />
                <el-table-column label="身高" align="center" prop="height" :show-overflow-tooltip="true" />
                <el-table-column label="体重" align="center" prop="weight" :show-overflow-tooltip="true" />
                <el-table-column label="当前体型" align="center" prop="nowBodyType" :show-overflow-tooltip="true" />
                <el-table-column label="期望体型" align="center" prop="targetBodyType" :show-overflow-tooltip="true" />
                <el-table-column label="运动能力描述" align="center" prop="athleticAbilityDescription" :show-overflow-tooltip="true" />
                <el-table-column label="bmi" align="center" prop="bmi" :show-overflow-tooltip="true" />
                <el-table-column label="运动等级" align="center" prop="difficultyLevel" :show-overflow-tooltip="true" />
                <el-table-column label="bmi描述" align="center" prop="bodyDescription" :show-overflow-tooltip="true" />
                <el-table-column label="计划天数" align="center" prop="planDays" :show-overflow-tooltip="true" />
                <el-table-column label="运动课程" align="center" prop="planCourse" :show-overflow-tooltip="true" />
                <el-table-column label="热量消耗" align="center" prop="consume" :show-overflow-tooltip="true" />


                <el-table-column label="操作" align="left" width="150" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button v-hasPermi="['system:post:edit']" link type="primary" icon="Edit"
                            @click="addOrUpdateHandle(scope.row.postId)">修改</el-button>

                        <el-button v-hasPermi="['system:post:remove']" link type="primary" icon="Delete"
                            @click="deleteHandle(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <pagination v-show="state.total > 0" v-model:page="state.queryParams.pageNum"
                v-model:limit="state.queryParams.pageSize" :total="state.total" @pagination="getDataList" />

        </el-card>

       <!-- 引用新增或修改的界面 -->
<!--        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update> -->

    </div>
</template>

<script lang="ts" setup name="ExercisePersonalize">
import {IHooksOptions} from '@/hooks/hooksinterface';
import {useCrud} from '@/hooks/hooksservice';
/* eslint-disable camelcase */
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance,nextTick} from 'vue';
import { personalizeListApi } from '@/api/app/exercise/personalize';

//引用新增修改组件页
/* import AddOrUpdate from './add-and-edit.vue'; */

// 获取当前vue3的页面this对象转换为proxy代理，查询 sys_dict_data表中的值
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

//是否展开节点
const isExpandAll = ref(false);
//刷新表格
const refreshTable = ref(true);

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
    queryApi: personalizeListApi,
    deleteApi: undefined,
    pageNum:1,
    pageSize:4,
    //主键名称
    primaryKey:'id',
    queryForm:  {

    }
});

/** 展开/折叠操作 */
function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
        refreshTable.value = true;
    });
}

//vue3中叫组合式函数
const { getDataList,  selectionChangeHandle,
        sortChangeHandle, resetQuery,deleteHandle, deleteBatchHandle }=useCrud(state)


// 调用新增或修改页面的方法
const addOrUpdateRef = ref();
//新增或修改的时候传递id
const addOrUpdateHandle = (id?: number| undefined) => {
    //调用它里面的init方法
    addOrUpdateRef.value.init(id)
}


</script>

<style></style>
